<template>
	<view class="body">
		<!-- 搜索框 -->
		<my-search @click="getSearch"></my-search>
		<view class="box">
			<!-- 渲染分类区 -->
			<!-- 左侧滚动区域 -->
			<scroll-view class="cate_left" scroll-y="true" :style="{height: ht+'px'}">
				<block v-for="(item,index) in goriesList" :key="index">
					<view :class="['cate-item',active === index?'active':'']" @click="activeChage(index)">
						{{item.cat_name}}</view>
				</block>
			</scroll-view>

			<!-- 右侧滚动区域 -->
			<scroll-view class="cate_right" scroll-y="true" :style="{height: ht+'px'}" :scroll-top="scrollTap">
				<block v-for="(item,index) in childrenList" :key="index">
					<view class="children_title">/{{item.cat_name}}/</view>
					<view class="children_main">
						<view class="children_box" v-for="(item2,index2) in item.children" :key="index2"
							@click="getGoods_list(item2)">
							<image class="children_img" src="@/static/logo.png" mode=""></image>
							<view class="children_name">{{item2.cat_name}}</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		categories
	} from "@/api/cate.js"
	export default {
		data() {
			return {
				goriesList: [],
				ht: 0,
				active: 0,
				childrenList: [],
				scrollTap: 0,
				// bgColor:'#ccc'
			}
		},
		onLoad() {
			this.getCategories();
			// 
			const sysInfo = uni.getSystemInfoSync();

			// 获取窗口的高度
			this.ht = sysInfo.windowHeight -44;

		},
		methods: {
			async getCategories() {
				const {
					data: res
				} = await categories();
				console.log(res);
				this.goriesList = res.message;
				this.childrenList = res.message[0].children;
			},
			activeChage(index) {
				this.active = index;
				// 点击左侧列表，右侧切换相应下标的列表内容
				this.childrenList = this.goriesList[index].children;
				// 点击 列表导航切换后，右侧内容回到顶部
				this.scrollTap = this.scrollTap === 0 ? 1 : 0

			},
			getGoods_list(item2) {
				uni.navigateTo({
					url: '/pages-supper/goods_list/goods_list?catId =' + item2.cat_id
				})
			},
			getSearch(){
				console.log("在第一时间")
			}
		}
	}
</script>

<style lang="scss">
	.box {
		display: flex;
	}

	.cate_left {
		width: 140rpx;
		font-size: 30rpx;

		.cate-item {
			text-align: center;
			line-height: 100rpx;
			background-color: #F7F7F7;

			&.active {
				background-color: white;
				position: relative;

				&::before {
					content: "";
					display: block;
					width: 6rpx;
					height: 40rpx;
					background-color: #C00000;
					position: absolute;
					top: 50%;
					left: 0%;
					margin-top: -15%;
				}
			}
		}
	}

	// 右侧
	.cate_right {
		width: 80%;

		.children_title {
			line-height: 150rpx;
			text-align: center;
		}

		.children_main {
			display: flex;
			flex-wrap: wrap;

			// justify-content: space-between;
			// margin: 20rpx;
			.children_box {
				width: 30%;
				height: 240rpx;
				margin: 10rpx;

				.children_img {
					width: 100%;
					height: 70%;
				}

				.children_name {
					font-size: 30rpx;
					text-align: center;
				}
			}
		}
	}
</style>
